visualHUD.application.buildControls = { 
	'appendForm': function(form, element, type){
	
		visualHUD.formGenerator.bindFormEvents(form);
		visualHUD.formGenerator.linkForm(form, element);
		
/*		form.css({
			position: '',
			top: '',
			left: '',
			display:'none'
		});	*/

		return form;
		
	},
	'appendElementActions': function(_wrapper){
		var buttonsWrapper = visualHUD.formGenerator.createFieldset('Actions', _wrapper);		
		var alignItemsList = visualHUD.formGenerator.createAlignControl(buttonsWrapper);
		var arrangeItemsList = visualHUD.formGenerator.createArrangeControl(buttonsWrapper);
//		visualHUD.formGenerator.createStyleButtons({element: element}, buttonsWrapper);		

		var form = _wrapper.closest('form');
		var actionsPanel = visualHUD.formGenerator.createActionsPanel(null, form);
			
		visualHUD.formGenerator.createToolbarButton({
			'name': 'delete',
			'label': 'Delete',
			'icon': 'trash',
			'fn': visualHUD.application.deleteElement,
			'args': null
		}, actionsPanel);	
			
	},
	'general': function(element, elementAttributes, dataObject){
	
		var props = dataObject.properties;
		var isPowerup = elementAttributes.isPowerup;
		var isTimer = elementAttributes.isTimer;
		var isAmmo = elementAttributes.isAmmo;
		var isArmor = elementAttributes.isArmor;
		var isHealth = elementAttributes.isHealth;
		var isColorRangeObject = elementAttributes.isColorRangeObject;
		var isAccuracy = elementAttributes.isAccuracy
			
		if(!dataObject.form){
			var formCss = {
//				position: 'absolute',
//				top: '-10000px',
//				left: '-10000px',
				display:'none'
			};
			var form = dataObject.form = visualHUD.formGenerator.createForm(visualHUD.application.settingsArea).css(formCss);
			
			visualHUD.formGenerator.createFormHeader(props, form);
			
			var formWrapper = form.append('<div class="app-form-container"></div>').find('div.app-form-container');
			
			var fieldset = visualHUD.formGenerator.createFieldset('Icon properties', formWrapper);
			var iStyleWrap = false;
			
			var iconData = visualHUD.constructor.icons[props.name];
			
			if(!isPowerup){
				if(iconData.length > 1) {
					var selectIconOptions = {};

//	iconData = [{name: 'QL Armor',url: 'resources/images/icons/armor.png',},{name: 'Q3A Armor',armor: 'resources/images/icons/iconr_red.png'}]

					for(a = 0, b = iconData.length; a < b; a++){
						selectIconOptions[a] = iconData[a].name
					};
					
					iStyleWrap = visualHUD.formGenerator.createSelect({
						'name': 'iconStyle',
						'label': 'Icon',
						'width': '100px',
						'value': props.iconStyle,
						'options': selectIconOptions
					}, fieldset);
				};

				var iconPositionOptions = {
					'left': 'Left',
					'top': 'Top',
					'right': 'Right',
					'bottom': 'Bottom'
				};
					
				if(isAccuracy) {
					delete iconPositionOptions.top;
					delete iconPositionOptions.bottom;
				};
					
				var iPositionWrap = visualHUD.formGenerator.createSelect({
					'name': 'iconPosition',
					'label': 'Position',
					'value': props.iconPosition,
					'width': iStyleWrap ? '60px' : '100px',
					'options': iconPositionOptions
				}, fieldset);

				if(iStyleWrap){
					iPositionWrap.find('select').insertAfter(iStyleWrap.find('select').addClass('mr-5'));
					iPositionWrap.remove();
				};
			} else {
				visualHUD.formGenerator.createSelect({
					'name': 'iconPosition',
					'label': 'Order',
					'value': props.iconPosition,
					'width': '120px',
					'options': {
						'left': 'Left to right',
						'right': 'Right to left',
						'top': 'Top to bottom',
						'bottom': 'Bottom to top'
					}
				}, fieldset);
			};
			
			visualHUD.formGenerator.createRangeInput({
				'name': 'iconSpacing',
				'label': 'Margin',
				'min': 0,
				'max': 32,
				'value': props.iconSpacing
			}, fieldset);
			
			visualHUD.formGenerator.createRangeInput({
				'name': 'iconSize',
				'label': 'Size',
				'min': 0,
				'max': 32,
				'value': props.iconSize
			}, fieldset);

			if(!isPowerup && !isAmmo){
				visualHUD.formGenerator.createRangeInput({
					'name': 'iconOpacity',
					'label': 'Opacity',
					'min': 0,
					'max': 100,
					'value': props.iconOpacity
				}, fieldset);
				
				visualHUD.formGenerator.createCheckbox({
					'name': 'teamColors',
					'label': 'Use team colors',
					'value': props.teamColors
				}, fieldset);
			};
			
			if(isPowerup){
				props.singlePowerup = false;
				visualHUD.formGenerator.createCheckbox({
					'name': 'singlePowerup',
					'label': 'Single icon',
					'value': props.singlePowerup
				}, fieldset);					
			};
			
			fieldset = visualHUD.formGenerator.createFieldset('Text properties', formWrapper);

			var textlength = 3;
			if(props.name == 'timer') textlength = 5;
			if(props.name == 'accuracyIndicator') textlength = 4;
			if(props.name == 'powerupIndicator') textlength = 2;

			if(!isColorRangeObject && !isTimer){
				var picker = visualHUD.formGenerator.createColorPicker({
					'name': 'textColor',
					'label': 'Color',
					'size': 6,
					'maxlength': 6,
					'value': props.textColor
				}, fieldset);
			};
			
			if(!isPowerup){
				var textLabel = visualHUD.formGenerator.createTextBox({
					'name': 'text',
					'label': 'Text',
					'maxlength': textlength,
					'size': 4,
					'value': props.text
				}, fieldset);
				
				if(isArmor || isAmmo || isHealth){
					textLabel.addClass('hidden');
				}
				
				if(!isColorRangeObject && !isTimer)
					textLabel.addClass('counter-text');

				visualHUD.formGenerator.createSelect({
					'name': 'textStyle',
					'label': 'Style',
					'value': props.textStyle,
					'width': '120px',
					'options': {
						'0': 'Normal',
						'3': 'Drop shadow'
					}
				}, fieldset);
			};


				
			visualHUD.formGenerator.createRangeInput({
				'name': 'textSize',
				'label': 'Size',
				'min': 0,
				'max': 100,
				'value': props.textSize
			}, fieldset);

			visualHUD.formGenerator.createRangeInput({
				'name': 'textOpacity',
				'label': 'Opacity',
				'min': 0,
				'max': 100,
				'value': props.textOpacity
			}, fieldset);

			if(isColorRangeObject){
				fieldset = visualHUD.formGenerator.createFieldset('Color range', formWrapper);
				visualHUD.formGenerator.createColorRange(props.colorRanges, fieldset);
			};
		
			this.appendElementActions(formWrapper);

		};
			
		
		return this.appendForm(form, element,props.name )

	},
	'obits': function(element, elementAttributes, dataObject){
		var props = dataObject.properties;

		
		var formChache = visualHUD.formGenerator.cache[props.name];
		var fragment = formChache;
			
		if(!dataObject.form){			
			var formCss = {
				display:'none'
			};
/*			var form = visualHUD.formGenerator.createForm().css(formCss);
			
			fragment = document.createDocumentFragment();	
			formChache = fragment.appendChild(form.get(0));*/
			
			var form = dataObject.form = visualHUD.formGenerator.createForm(visualHUD.application.settingsArea).css(formCss);
			
			visualHUD.formGenerator.createFormHeader(props, form);
			var formWrapper = $('<div class="app-form-container" />').appendTo(form);
			
			this.appendElementActions(formWrapper);	
		};
		
		return this.appendForm(form, element,props.name )
	},
	'iconItem':function(element, elementAttributes, dataObject){
		var props = dataObject.properties;

		
		var formChache = visualHUD.formGenerator.cache[props.name];
		var fragment = formChache;
			
		if(!dataObject.form){			
			var formCss = {
				display:'none'
			};
/*			var form = visualHUD.formGenerator.createForm().css(formCss);
			
			fragment = document.createDocumentFragment();	
			formChache = fragment.appendChild(form.get(0));*/
			
			var form = dataObject.form = visualHUD.formGenerator.createForm(visualHUD.application.settingsArea).css(formCss);
			
			visualHUD.formGenerator.createFormHeader(props, form);

			var formWrapper = $('<div class="app-form-container" />').appendTo(form);			
			var fieldset = visualHUD.formGenerator.createFieldset('Icon properties', formWrapper);
			var iconData = visualHUD.constructor.icons[props.name];
			
			if(iconData.length > 1) {
				var selectIconOptions = {};
				for(a = 0, b = iconData.length; a < b; a++){
					selectIconOptions[a] = iconData[a].name
				};
				
				iStyleWrap = visualHUD.formGenerator.createSelect({
					'name': 'iconStyle',
					'label': 'Icon',
					'width': '100px',
					'value': props.iconStyle,
					'options': selectIconOptions
				}, fieldset);
			};
				
			visualHUD.formGenerator.createRangeInput({
				'name': 'iconSize',
				'label': 'Size',
				'min': 8,
				'max': 48,
				'value': props.iconSize
			}, fieldset);

			this.appendElementActions(formWrapper);
	
		};
		
		return this.appendForm(form, element,props.name );
	},
	'scoreBox': function(element, elementAttributes, dataObject){
		var props = dataObject.properties;

		
		var formChache = visualHUD.formGenerator.cache[props.name];
		var fragment = formChache;
			
		if(!dataObject.form){			
			var formCss = {
				display:'none'
			};
			var form = dataObject.form = visualHUD.formGenerator.createForm(visualHUD.application.settingsArea).css(formCss);
			
			visualHUD.formGenerator.createFormHeader(props, form);
			var formWrapper = $('<div class="app-form-container" />').appendTo(form);
			
			var fieldset = visualHUD.formGenerator.createFieldset('Scorebox properties', formWrapper);

			visualHUD.formGenerator.createSelect({
				'name': 'scoreboxStyle',
				'label': 'Style',
				'value': props.style,
				'width': '182px',
				'options': {
					'0': 'Classic full',
					'1': 'Classic small',
					'2': 'Compact'
				}
			}, fieldset);
			
			visualHUD.formGenerator.createSelect({
				'name': 'layout',
				'label': 'Layout',
				'value': props.layout,
				'width': '182px',
				'options': {
					'vertical': 'Vertical',
					'horizontal': 'Horizontal'
				}
			}, fieldset);

			visualHUD.formGenerator.createRangeInput({
				'name': 'spacing',
				'label': 'Spacing',
				'min': 0,
				'max': 16,
				'value': props.spacing
			}, fieldset);
			
			visualHUD.formGenerator.createSelect({
				'name': 'mode',
				'label': 'Mode',
				'value': props.mode,
				'width': '182px',
				'options': {
					'ffa': 'FFA / Duel',
					'tdm': 'Teamplay'
				}
			}, fieldset);
			
			this.appendElementActions(formWrapper);
		}
		return this.appendForm(form, element,props.name );
	},
	'rect': function(element, elementAttributes, dataObject){
		var props = dataObject.properties;
		
		var isRect = props.itemType == 'rect';
		var isBar = props.itemType == 'bar';
		var isChat = props.itemType == 'chatArea';
			
		if(!dataObject.form){			
			var formCss = {
				display:'none'
			};
			
			var form = dataObject.form = visualHUD.formGenerator.createForm(visualHUD.application.settingsArea).css(formCss);
			
			visualHUD.formGenerator.createFormHeader(props, form);
			var formWrapper = $('<div class="app-form-container" />').appendTo(form);
			
			var fsetTitle = isBar || isChat ? props.label : 'Area'
			var fieldset = visualHUD.formGenerator.createFieldset(fsetTitle + '  properties', formWrapper);
			
			if(isBar) {
				visualHUD.formGenerator.createSelect({
					'name': 'barDirection',
					'label': 'Direction',
					'value': props.barDirection,
					'width': '100px',
					'options': {
						'0': 'Left to right',
						'1': 'Right to left'
					}
				}, fieldset);
			};
			
			visualHUD.formGenerator.createRangeInput({
				'name': 'width',
				'label': 'Width',
				'min': props.minWidth,
				'max': props.maxWidth,
				'value': props.width
			}, fieldset);

			visualHUD.formGenerator.createRangeInput({
				'name': 'height',
				'label': 'Height',
				'min': props.minHeight,
				'max': props.maxHeight,
				'value': props.height
			}, fieldset);

			if(isBar || isChat) {
				visualHUD.formGenerator.createRangeInput({
					'name': 'padding',
					'label': 'Padding',
					'min': 0,
					'max': 10,
					'value': props.padding
				}, fieldset);
			};
			
			if(isBar) {
				visualHUD.formGenerator.createRangeInput({
					'name': 'padding',
					'label': 'Padding',
					'min': 0,
					'max': 10,
					'value': props.padding
				}, fieldset);

				var barValue  = visualHUD.formGenerator.createTextBox({
					'name': 'barValue',
					'label': 'Value',
					'value': props.barValue
				}, fieldset);
				
				barValue.addClass('hidden');
					
			} else {
				visualHUD.formGenerator.createSelect({
					'name': 'borderRadius',
					'label': 'Rounded',
					'value': props.borderRadius,
					'width': '100px',
					'options': {
						'0': 'None',
						'3': '3px',
						'5': '5px',
						'8': '8px'
					}
				}, fieldset);				
				visualHUD.formGenerator.createSelect({
					'name': 'boxStyle',
					'label': 'Style',
					'value': props.boxStyle,
					'width': '182px',
					'options': {
						'0': 'Solid',
						'Gradient': {
							'1': 'Top to bottom',
							'2': 'Bottom to top',
							'3': 'Left to right',
							'4': 'Right to left'
						}
					}
				}, fieldset);				
			};
			
			visualHUD.formGenerator.createColorPicker({
				'name': 'color',
				'label': 'Fill color',
				'size': 6,
				'maxlength': 6,
				'value': props.color
			}, fieldset);
			
			if(!isBar) {
				visualHUD.formGenerator.createCheckbox({
					'name': 'teamColors',
					'label': 'Use team colors',
					'value': props.teamColors
				}, fieldset).addClass('counter-text');	
			};
			
			visualHUD.formGenerator.createRangeInput({
				'name': 'opacity',
				'label': 'Opacity',
				'min': 0,
				'max': 100,
				'value': props.opacity
			}, fieldset);
			
			if(isBar) {
				fieldset = visualHUD.formGenerator.createFieldset('Color range', formWrapper);
				var rdivs = visualHUD.formGenerator.createColorRange(props.colorRanges, fieldset);

				rdivs.find('input[name=colorRange_1_range_1]').attr('readOnly', true);
				rdivs.find('input[name=colorRange_2_range_0]').attr('readOnly', true);
			
				visualHUD.formGenerator.createRangeInput({
					'name': 'barsOpacity',
					'label': 'Opacity',
					'min': 0,
					'max': 100,
					'value': props.barsOpacity
				}, fieldset);
					
			} else if(isRect){
				visualHUD.formGenerator.createCheckbox({
					'name': 'hairLine',
					'label': 'Hairline',
					'value': props.hairLine
				}, fieldset);	
			} else if(isChat){
				visualHUD.formGenerator.createCheckbox({
					'name': 'toggleChat',
					'label': 'Show Chat',
					'value': false
				}, fieldset);	
			};
			
			this.appendElementActions(formWrapper);	

		}
		return this.appendForm(form, element,props.name );
	},
	'textItem':function(element, elementAttributes, dataObject){
		var props = dataObject.properties;

		
		var formChache = visualHUD.formGenerator.cache[props.name];
		var fragment = formChache;
			
		if(!dataObject.form){			
			var formCss = {
				display:'none'
			};
/*			var form = visualHUD.formGenerator.createForm().css(formCss);
			
			fragment = document.createDocumentFragment();	
			formChache = fragment.appendChild(form.get(0));*/
			
			var form = dataObject.form = visualHUD.formGenerator.createForm(visualHUD.application.settingsArea).css(formCss);
			
			visualHUD.formGenerator.createFormHeader(props, form);

			var formWrapper = $('<div class="app-form-container" />').appendTo(form);			
			var fieldset = visualHUD.formGenerator.createFieldset('Text properties', formWrapper);
			var iconData = visualHUD.constructor.icons[props.name];

			visualHUD.formGenerator.createRangeInput({
				'name': 'textSize',
				'label': 'Size',
				'min': 0,
				'max': 100,
				'value': props.textSize
			}, fieldset);
			
			var textLabel = visualHUD.formGenerator.createTextBox({
				'name': 'template',
				'label': 'Template',
				'value': props.template
			}, fieldset);
							

			visualHUD.formGenerator.createRangeInput({
				'name': 'text',
				'label': 'Text',
				'min': 0,
				'max': 100,
				'value': props.text
			}, fieldset);

			visualHUD.formGenerator.createSelect({
				'name': 'ownerDraw',
				'label': 'Show',
				'value': props.ownerDraw,
				'width': '180px',
				'options': {
					'0': 'All the time',
					'CG_SHOW_IF_WARMUP': 'During warm up only',
					'CG_SHOW_IF_NOT_WARMUP': 'During match only'
				}
			}, fieldset);
			
			fieldset = visualHUD.formGenerator.createFieldset('Text style', formWrapper);
			visualHUD.formGenerator.createSelect({
				'name': 'textStyle',
				'label': 'Style',
				'value': props.textStyle,
				'width': '120px',
				'options': {
					'0': 'Normal',
					'2': 'Drop shadow'
				}
			}, fieldset);
				
			var picker = visualHUD.formGenerator.createColorPicker({
				'name': 'textColor',
				'label': 'Color',
				'size': 6,
				'maxlength': 6,
				'value': props.textColor
			}, fieldset);
				
			visualHUD.formGenerator.createRangeInput({
				'name': 'opacity',
				'label': 'Opacity',
				'min': 0,
				'max': 100,
				'value': props.opacity || 100
			}, fieldset);

			fieldset = visualHUD.formGenerator.createFieldset('Color range', formWrapper);
//			var rdivs = visualHUD.formGenerator.createSimpleColorRange(props.colorRanges, fieldset);

				var rdivs = visualHUD.formGenerator.createColorRange(props.colorRanges, fieldset);

				rdivs.find('input[name=colorRange_0_range_0]').attr('readOnly', true);
				rdivs.find('input[name=colorRange_2_range_1]').attr('readOnly', true);
			

			this.appendElementActions(formWrapper);
		};
		
		return this.appendForm(form, element,props.name );
	}
};